<template>
  <div class="option">
    <div class="optop">
      <router-link to="/">
        <div class="topmenu">
          <img src="@/assets/img/caidans.png" alt="" />
        </div>
      </router-link>
    </div>
    <main>
      <div class="mianbox">
        <div class="top">
          <div class="section1">
            <img src="@/assets/img/menu.png" alt="" />
            <p>菜单类目</p>
          </div>
          <div class="section2">
            <img src="@/assets/img/bill.png" alt="" />
            <p>销售账单</p>
          </div>
          <div class="section3">
            <img src="@/assets/img/inout.png" alt="" />
            <p>库存出入</p>
          </div>
          <div class="section4">
            <img src="@/assets/img/support.png" alt="" />
            <p>服务与支持</p>
          </div>
        </div>
        <div class="bottom">
          <div class="section1">
            <img src="@/assets/img/address.png" alt="" />
            <p>详情地址</p>
          </div>
          <div class="section2">
            <img src="@/assets/img/detail.png" alt="" />
            <p>今日详情</p>
          </div>
          <div class="section3">
            <img src="@/assets/img/respond.png" alt="" />
            <p>用户反馈</p>
          </div>
          <div class="section4">
            <img src="@/assets/img/myself.png" alt="" />
            <p>个人中心</p>
          </div>
          <div class="section5">
            <div class="sc-top">
              <img src="@/assets/img/setting.png" alt="" />
              <p class="lingshe">设置</p>
            </div>
            <div class="sc-bot">
              <img src="@/assets/img/app.png" alt="" />
              <p class="lingshe">设置</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    console.log(2);
  },
});
</script>

<style lang="scss">
.option {
  height: 100%;
  .optop {
    height: 56px;
    background: #454867;
    width: 100%;
    .topmenu {
      position: absolute;
      right: 160px;
      top: 8px;
    }
  }
  main {
    width: 100%;
    height: 100%;
    background: #2a2b3d;
    // background-color: skyblue;
    position: relative;
    .mianbox {
      position: absolute;
      top: 4%;
      left: 15%;
      width: 70%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // background: pink;
      .top {
        width: 100%;
        height: 48%;
        // background-color: skyblue;
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
          transition:0.2s;
        }
        div:hover {
          // position: relative;
          // bottom: 5px;
          transform: translateY(-4px);
        }
        p {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 24px;
          color: #ffffff;
          text-align: center;
          position: absolute;
          left: 0px;
          bottom: 35px;
        }
        .section1 {
          height: 100%;
          width: 35%;
          background-color: #d1703d;
          border-radius: 10px;
          position: relative;
          box-shadow: 0px 4px 6px 0px #040000;
          img {
            width: 125px;
            height: 125px;
          }
        }
        .section2 {
          border-radius: 10px;
          height: 100%;
          width: 20%;
          background-color: #1bb2a1;
          position: relative;
          box-shadow: 0px 4px 6px 0px #040000;
          img {
            width: 99px;
            height: 99px;
          }
        }
        .section3 {
          border-radius: 10px;
          height: 100%;
          width: 20%;
          background-color: #4987d2;
          box-shadow: 0px 4px 6px 0px #040000;
          position: relative;
          img {
            width: 94px;
            height: 106px;
          }
        }
        .section4 {
          border-radius: 10px;
          height: 100%;
          width: 20%;
          background-color: #826ee1;
          box-shadow: 0px 4px 6px 0px #040000;
          position: relative;
          img {
            width: 106px;
            height: 98px;
          }
        }
      }
      .bottom {
        width: 100%;
        height: 48%;
        // background-color: skyblue;
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
          transition:0.2s;
        }
        .section1 {
          height: 100%;
          width: 19%;
          border-radius: 10px;
          background-color: #454867;
          position: relative;
          box-shadow: 0px 4px 6px 0px #040000;
          img {
            width: 101px;
            height: 102px;
          }
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 0px;
            bottom: 35px;
          }
        }
        .section2 {
          height: 100%;
          width: 19%;
          border-radius: 10px;
          background-color: #454867;
          box-shadow: 0px 4px 6px 0px #040000;
          position: relative;
          img {
            width: 101px;
            height: 101px;
          }
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 0px;
            bottom: 35px;
          }
        }
        .section3 {
          height: 100%;
          width: 19%;
          border-radius: 10px;
          background-color: #454867;
          box-shadow: 0px 4px 6px 0px #040000;
          position: relative;
          img {
            width: 99px;
            height: 101px;
          }
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 0px;
            bottom: 35px;
          }
        }
        .section4 {
          height: 100%;
          width: 19%;
          border-radius: 10px;
          background-color: #454867;
          box-shadow: 0px 4px 6px 0px #040000;
          position: relative;
          img {
            width: 101px;
            height: 101px;
          }
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 0px;
            bottom: 35px;
          }
        }
        .section5 {
          height: 100%;
          width: 19%;
          // background-color: #454867;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          div {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
          }
          .sc-top {
            width: 100%;
            height: 48%;
            background-color: #454867;
            box-shadow: 0px 4px 6px 0px #040000;
            img {
              width: 46px;
              height: 46px;
              margin-right: 15px;
            }
            .lingshe {
              color: #ffffff;
              font-size: 24px;
            }
          }
          .sc-top:hover {
            transform: translateY(-4px);
          }
          .sc-bot {
            width: 100%;
            height: 48%;
            background-color: #454867;
            box-shadow: 0px 4px 6px 0px #040000;
            img {
              width: 38px;
              height: 59px;
              margin-right: 20px;
            }
            .lingshe {
              color: #ffffff;
              font-size: 24px;
            }
          }
          .sc-bot:hover {
            transform: translateY(-4px);
          }
        }
        .section1:hover {
          transform: translateY(-4px);
        }
        .section2:hover {
          transform: translateY(-4px);
        }
        .section3:hover {
          transform: translateY(-4px);
        }
        .section4:hover {
          transform: translateY(-4px);
        }
      }
    }
  }
}
</style>
